<script setup lang="ts">
import { onMounted, ref, shallowRef, watch } from "vue";
import { useEquip } from "@/stores/useEquip";
import { useCurrentEquip } from "../hooks/useCurrentEquip";
import AMapLoader from "@amap/amap-jsapi-loader";
import { equip1, equip2, equip3, equip4 } from "@/configs/equip";
import guanche from "@/assets/images/guanche.svg";

let traceCar = false;
const equipStore = useEquip();
const currentEquip = useCurrentEquip();
const oAMap = ref<HTMLDivElement>();
const amap = shallowRef<AMap.Map | null>(null);
const marker = {
    car: null as AMap.Marker | null,
    can1: null as AMap.Marker | null,
    can2: null as AMap.Marker | null,
    can3: null as AMap.Marker | null,
    can4: null as AMap.Marker | null,
};
watch(
    [
        () => equipStore.equipsInfo.find((v) => v.fUNID == equip1.unid)?.dtAI[4]?.value,
        () => equipStore.equipsInfo.find((v) => v.fUNID == equip2.unid)?.dtAI[4]?.value,
        () => equipStore.equipsInfo.find((v) => v.fUNID == equip3.unid)?.dtAI[4]?.value,
        () => equipStore.equipsInfo.find((v) => v.fUNID == equip4.unid)?.dtAI[4]?.value,
        () => currentEquip.currentUnid.value,
    ],
    () => updateCans()
);
onMounted(() => {
    init();
});
function init() {
    AMapLoader.load({
        key: "b86c6df7aad8e2c859955eb45f21b3b1",
        version: "2.0",
        plugins: ["AMap.Driving", "AMap.MoveAnimation"],
    }).then(() => {
        amap.value = new AMap.Map(oAMap.value!, {
            pitch: 20,
            rotateEnable: true,
            pitchEnable: true,
            viewMode: "3D",
            zoom: 13.5,
            center: [116.407428, 39.88523],
            mapStyle: "amap://styles/blue",
            showLabel: false,
            skyColor: "#dffbff",
        });
        marker.car = new AMap.Marker({
            position: equip1.position,
            icon: new AMap.Icon({ image: guanche, imageSize: [80, 80] }),
            anchor: "center",
            title: "罐车",
        });
        amap.value.add(marker.car);
        marker.car.on("click", () => {
            amap.value?.setPitch(75);
            amap.value?.setZoom(17);
            traceCar = true;
        });
        marker.can1 = new AMap.Marker({
            position: equip1.position,
            content: getContentTemplate(0),
            anchor: "bottom-center",
            title: equip1.title,
        });
        amap.value.add(marker.can1);
        marker.can1.on("click", () => currentEquip.setCurrentUnid(equip1.unid));
        marker.can2 = new AMap.Marker({
            position: equip2.position,
            content: getContentTemplate(0),
            anchor: "bottom-center",
            title: equip2.title,
        });
        amap.value.add(marker.can2);
        marker.can2.on("click", () => currentEquip.setCurrentUnid(equip2.unid));
        marker.can3 = new AMap.Marker({
            position: equip3.position,
            content: getContentTemplate(0),
            anchor: "bottom-center",
            title: equip3.title,
        });
        amap.value.add(marker.can3);
        marker.can3.on("click", () => currentEquip.setCurrentUnid(equip3.unid));
        marker.can4 = new AMap.Marker({
            position: equip4.position,
            content: getContentTemplate(0),
            anchor: "bottom-center",
            title: equip4.title,
        });
        amap.value.add(marker.can4);
        marker.can4.on("click", () => currentEquip.setCurrentUnid(equip4.unid));
        updateCans();
        new AMap.Driving({ policy: 0 }).search(equip1.position, equip4.position, (status, result) => {
            if (status == "complete") {
                const paths: AMap.LngLat[] = [];
                result.routes[0].steps.forEach((v: { path: AMap.LngLat[] }) => paths.push(...v.path));
                // const polyline = new AMap.Polyline({
                //     path: paths,
                //     strokeWeight: 5,
                //     strokeColor: "#a5a7e2",
                //     strokeOpacity: 1,
                //     lineJoin: "round",
                // });
                // const passedPolyline = new AMap.Polyline({
                //     path: [paths[0]],
                //     strokeWeight: 5,
                //     strokeColor: "#666",
                //     strokeOpacity: 1,
                //     lineJoin: "round",
                // });
                // amap.value?.add(polyline);
                // amap.value?.add(passedPolyline);
                marker.car?.on("moving" as AMap.EventType, (e) => {
                    // passedPolyline.setPath(e.passedPath)
                    if (traceCar) {
                        amap.value?.setCenter([e.pos.lng, e.pos.lat]);
                        amap.value?.setRotation(-e.target.lastAngle);
                    }
                });
                marker.car?.setPosition([paths[0].lng, paths[0].lat]);
                marker.car?.moveAlong(paths, { circlable: true, duration: 5000 });
            }
        });
        amap.value.on("mousedown", () => {
            traceCar = false;
        });
        amap.value.on("click", () => {
            currentEquip.setCurrentUnid("");
        });
    });
}
function updateCans() {
    marker.can1?.setContent(getContentTemplate(equipStore.equipsInfo.find((v) => v.fUNID == equip1.unid)?.dtAI[4]?.value || 0, currentEquip.currentUnid.value == equip1.unid));
    marker.can2?.setContent(getContentTemplate(equipStore.equipsInfo.find((v) => v.fUNID == equip2.unid)?.dtAI[4]?.value || 0, currentEquip.currentUnid.value == equip2.unid));
    marker.can3?.setContent(getContentTemplate(equipStore.equipsInfo.find((v) => v.fUNID == equip3.unid)?.dtAI[4]?.value || 0, currentEquip.currentUnid.value == equip3.unid));
    marker.can4?.setContent(getContentTemplate(equipStore.equipsInfo.find((v) => v.fUNID == equip4.unid)?.dtAI[4]?.value || 0, currentEquip.currentUnid.value == equip4.unid));
}
function getContentTemplate(height: number, active: boolean = false) {
    return `
        <div style="position: relative;width: 50px;height: 50px;border-radius: 50%;border: 2px solid ${active ? "#fff" : "#88c8ea"};overflow: hidden;${active ? "box-shadow: 0 0 30px 1px #88c8ea;" : ""}">
            <div style="position: absolute;left: 0;bottom: 0;width: 100%;height: ${height}%;background-color: #88c8ea;">
            </div>
        </div>
    `;
}
</script>

<template>
    <div ref="oAMap" class="map-area"></div>
</template>

<style scoped lang="scss">
.map-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
